<template>
    <div class="app-head">
        <div class="data">
            <div class="open" @click="handleClose">
                <i class="ri-bar-chart-horizontal-line" />
            </div>
            <div class="left">
                <img class="logo" src="@/static/img/logo.png" alt="悠悠博客">
            </div>
            <div class="main" :class="{ active: active }">
                <div class="web-logo">
                    <div class="close" @click="handleClose">
                        <i class="ri-close-line" />
                    </div>
                    <div class="data">
                        <img src="@/static/img/avatar.webp" alt="悠悠博客">
                        <div class="user">
                            <p>保洁阿姨</p>
                            <p>50+年前端设计经验</p>
                        </div>
                    </div>
                </div>
                <ul class="menu">
                    <li>
                        <NuxtLink to="/" @click="handleClose">首页</NuxtLink>
                    </li>
                    <li v-for="(item, i) in list" :key="i">
                        <NuxtLink :to="{ name: 'list-id', params: { id: item.id } }" @click="handleClose">{{ item.name }}</NuxtLink>
                    </li>
                    <li>
                        <NuxtLink to="/tags" @click="handleClose">云标签</NuxtLink>
                    </li>
                    <li>
                        <NuxtLink to="/links" @click="handleClose">邻居</NuxtLink>
                    </li>
                </ul>
            </div>
            <div class="right">
                <div class="login">
                    <i class="ri-qq-fill" @click="qqlogin" />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import './app.less'
import { Toast } from 'usuuu'

/**
 * 点击事件
 */
const active = ref(false)
const handleClose = () => {
    active.value = !active.value
}
/**
 * 菜单列表
 */
const { data } = await menuApi()
const list = computed(() => data.value?.data?.list ?? [])
/**
 * 增加访问量
 */
await lookViewApi()
/**
 * qq登录
 */
const qqlogin = (async () => {
    const data = await qqloginApi()
    if (data.code == 200) {
        navigateTo (data.data, { external: true })
    } else {
        Toast.open(data.msg)
    }
})
</script>